<script>	

export default {
  name:'Footer',
  data () {
    return { 
      year:new Date().getFullYear(),
      com_logo_src: require('../static/com_logo.png'),
      ercode:require('../static/ercode.png'),
      list:[
        {titl:"ADD：广东深圳市南山区高新中四道31号研祥科技大厦6楼"},
        {titl:"EMAIL：huangyl@eddue.com"},
        {titl:"TEL：0755-26606739"}        
      ]
    }
    // <h1 class="red">{this.msg}</h1> 1.vue使用jsx绑定img的两种方法。2.事件绑定方法。循环写法
  },
  render (h) {
    return (
      <div class="footer">
        <div class="ininer">
          <div class="ft_l ft_l1">
            <div class="ft_l1_text">contact<span>us</span></div>
            <h3>联系我们</h3>
            <ul>
              {
                this.list.map((item,index)=>{
                  return(
                    <li id={'id_'+index} key={index+item}>{item.titl}</li>
                )})
              }
            </ul>
          </div>
          <div class="ft_l ft_l2" on-click={this.clickHandler}>
            <img src={this.com_logo_src}></img> 
            <dd>Copyright © {this.year}深圳市异度信息产业有限公司,版权所有</dd>
          </div>
          <div class="ft_l ft_l3">
            <p>扫描官方微信二维码关注我们</p>
            <img src={require('../static/ercode.png')}></img>
          </div>
        </div>
      </div>
    )
  },
  methods:{
    clickHandler(){
      console.log("111")
    }
  }
};

</script>

<style scoped lang="scss">
.footer{
  background: #eeeeee;
  padding: 18px 0;
  .ininer{
    max-width: 1200px;
    margin: 0 auto;
    zoom: 1;
    .ft_l{
      width: 33.33%;
      float: left;
      .ft_l1_text{
        display: inline-block;
        font-size: 30px;
        font-family: Arial;
        color: $text-color;
        margin-top: 22px;
        position: relative;
        span{
          position: absolute;
          top: 6px;
          right: -24px;
          font-size: 16px;
          font-weight: 600;
        }
      }
      h3{
        font-size: 16px;
        color: $main-color;
        line-height: 16px;
        font-family:黑体;
        margin:8px 0 40px 0;
      }
      ul li{
        color: $main-color;
        font-size: 14px;
        font-family:黑体;
        margin-bottom: 10px;
        line-height: 14px;
      }
    }
    .ft_l2{
      text-align: center;
      img{
        width: 75px;
        height: 51px;
        margin: 55px 0;
      }
      dd{
        font-size: 14px;
        color: $main-color;
        line-height: 14px;
      }
    }
    .ft_l3{
      text-align: right;
      padding-right: 35px;
      font-size: 14px;
      color: $main-color;
      line-height: 14px;
      img{
        margin-top: 30px;
        margin-right: 32px;
        width: 115px;
        height: auto;
      }
    }
  }
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}
@media (min-width: 320px) and (max-width: 1199px){
  .footer{
    .ininer{
      padding: 0 20px;
      .ft_l{
        width: 100%;
      }
      .ft_l3{
        margin-top: 30px;
        text-align: center;
        padding-right:0;
        img{
          margin-right: 0;
        }
      }
    }
  }
}
</style>